<template>
    <div>
        <div class="login-boxtitle" style="height: 100px;">
            <div class="logoBig">
                <img src="../assets/images/logobig.png" style="margin-left: 0px ; height: 100px;">
            </div>
        </div>
        <div class="login-banner" style="background: rgb(142,213,21);">
            <div class="login-main">
                <div class="login-banner-bg"><span></span><img width="400"  src="../assets/images/act2.png" /></div>
                <div class="login-box">
                    <h3 class="title">用户注册</h3>
                    <div class="clear"></div>
                    <div id="container">
                        <div class="login-form" style="background: none;">
                            <form>
                                <h5 :style="colorStyle">{{tips}}&nbsp;</h5>
                                <div class="user-name" style="margin-top: 15px;">
                                    <label><span class="glyphicon glyphicon-user" aria-hidden="true"></span></label>
                                    <input type="text" v-model="userName" placeholder="邮箱/手机/用户名" @blur="checkUserName">
                                </div>
                                <div class="user-pass" style="margin-top: 15px;">
                                    <label><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></label>
                                    <input type="password" v-model="password" placeholder="请输入密码" @blur="checkInfo">
                                </div>
                                <div class="user-pass" style="margin-top: 15px;">
                                    <label><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></label>
                                    <input type="password" v-model="Rpassword" placeholder="请再次输入密码" @keyup="checkPassword">
                                </div>
                            </form>
                        </div>
                        <div class="login-links">
                            <br />
                        </div>
                        <div class="am-cf">
                            <button value="提交注册" class="am-btn am-btn-primary am-btn-sm" @click="submit">提交注册</button>
                        </div>
                        <div class="partner">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer ">
            <div class="footer-hd ">

            </div>
            <div class="footer-bd ">
                <p>
                    <a href="# ">联系我们</a>
                    <a href="# ">网站地图</a>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                userName:"",
                password:"",
                Rpassword:"",
                tips:"",
                colorStyle:""
            }
        },
        methods:{
            checkUserName(){
                if(this.userName.length == 0){
                    this.tips = "用户名不能为空";
                    this.colorStyle = "color:red";
                }else{
                    this.axios.get("http://localhost:8080/user/checkUserName",{
                        params:{
                            userName:this.userName
                        }
                    }).then((res)=>{
                        if(res.data.code == 1000){
                            this.tips = res.data.msg;
                            this.colorStyle = "color:red";
                        }else{
                            this.tips = res.data.msg;
                            this.colorStyle = "color:green";
                        }
                    });
                }
            },
            checkInfo(){
                if(this.password.length==0){
                    this.tips = "密码不能为空";
                    this.colorStyle = "color:red";
                }else if(this.password.length<6||this.password.length>12){
                    this.tips = "密码长度必须为6到12个字符";
                    this.colorStyle = "color:red";
                }else{
                    this.tips = "密码可以使用";
                    this.colorStyle = "color:green";
                }
            },
            checkPassword(){
                if(this.Rpassword != this.password){
                    this.tips = "两次密码不一致";
                    this.colorStyle = "color:red";
                }else{
                    this.tips = "可以提交注册";
                    this.colorStyle = "color:green";
                }
            },
            submit(){
                this.axios.get("http://localhost:8080/user/regist",{
                    params:{
                        userName:this.userName,
                        password:this.password
                    }
                }).then((res)=>{
                    this.$router.push(`/login`);
                });
            }
        }
    }
</script>

<style scoped>
@import "../assets/css/amazeui.css";
@import "../assets/css/dlstyle.css";
@import "../assets/css/bootstrap.min.css";
</style>